<template>
  <view class="uni-padding-wrap uni-common-mt">
    <page-head title="checkbox 复选框" />

    <!-- 1. 默认样式 -->
    <view class="uni-title uni-common-mt">默认样式</view>
    <checkbox-group>
      <label><checkbox value="cb1" :checked="true" />选中</label>
      <label><checkbox value="cb2" />未选中</label>
    </checkbox-group>

    <!-- 2. 不同颜色 + 尺寸 -->
    <view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
    <checkbox-group>
      <label class="color-box" style="background-color:#8A6DE9;">
        <checkbox value="c1" :checked="true" style="transform:scale(0.7)" />选中
      </label>
      <label class="color-box">
        <checkbox value="c2" style="transform:scale(0.7)" />未选中
      </label>
    </checkbox-group>

    <!-- 3. 推荐展示样式（国家列表） -->
    <view class="uni-title uni-common-mt">推荐展示样式</view>
    <checkbox-group @change="checkboxChange">
      <label
        class="uni-list-cell uni-list-cell-pd"
        v-for="item in items"
        :key="item.value"
        :style="{ backgroundColor: item.color }"
      >
        <checkbox :value="item.value" :checked="item.checked" />
        <text>{{ item.name }}</text>
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '中国', value: 'CN', checked: true, color: '#F3A73F' },
        { name: '美国', value: 'US', checked: false, color: '#F3A73F' },
        { name: '巴西', value: 'BR', checked: false, color: '#F3A73F' },
        { name: '日本', value: 'JP', checked: false, color: '#F3A73F' },
        { name: '英国', value: 'UK', checked: false, color: '#F3A73F' },
        { name: '法国', value: 'FR', checked: false, color: '#F3A73F' }
      ]
    }
  },
  methods: {
    checkboxChange(e) {
      const values = e.detail.value
      this.items.forEach(item => {
        item.checked = values.includes(item.value)
      })
    }
  }
}
</script>

<style>
/* 统一间距 */
.uni-padding-wrap {
  padding: 30rpx;
}
.uni-title {
  font-size: 32rpx;
  font-weight: 600;
  margin: 30rpx 0 20rpx;
}
/* 默认 label 不换行 */
label {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
}
/* 带背景色的小方块 */
.color-box {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  color: #fff;
  margin-right: 20rpx;
}
/* 列表样式 */
.uni-list-cell {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
.uni-list-cell-pd {
  padding-left: 30rpx;
}
checkbox {
  margin-right: 16rpx;
}
</style>